<template>
  <div class="mobile-common-query card-item">
    <div class="query-item">
      <span>分类：</span>
      <el-segmented v-model="passwordStore.queryInfo.category"
                    :options="queryCategoryList"
                    @change="passwordStore.queryPasswordList()"/>
    </div>

    <div class="query-item">
      <span>所属人：</span>
      <el-segmented v-model="passwordStore.queryInfo.owner"
                    :options="queryOrderList"
                    @change="passwordStore.queryPasswordList()"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { usePasswordStore } from '@/store/password.ts'
import { ICategory } from '@/types'

const passwordStore = usePasswordStore()

const queryCategoryList = ref([] as ICategory[])

onMounted(async () => {
  await passwordStore.queryPasswordCategory()
  initCategoryList()
})

const queryOrderList = [
  {
    label: '哥哥',
    value: '哥哥'
  }, {
    label: '宝宝',
    value: '宝宝'
  }
]

const initCategoryList = () => {
  queryCategoryList.value = []
  queryCategoryList.value.push({
    label: '全部',
    value: ''
  })
  passwordStore.categoryList.forEach((item) => {
    queryCategoryList.value.push({
      label: item,
      value: item
    })
  })
}
</script>
